<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span v-if="!edit">新增方法</span>
            <span v-else>更新方法</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
            <div v-if="edit" class="buttonBox">
              <el-button type="primary" icon="el-icon-document-remove" size="mini" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-loading="loading">
      <el-form ref="form" :model="data" inline :rules="formRules">
        <el-row :gutter="10">
          <el-col :xl="3" :lg="4" :md="5" :sm="6">
            <el-form-item prop="coding">
              <div><span class="red">*</span>编号</div>
              <el-input v-model="data.coding" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :xl="3" :lg="4" :md="5" :sm="6">
            <el-form-item prop="name">
              <div><span class="red">*</span>名称</div>
              <el-input v-model="data.name" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :xl="3" :lg="4" :md="5" :sm="6">
            <el-form-item prop="type_id">
              <div><span class="red">*</span>类型</div>
              <el-select v-model="data.type_id" size="mini">
                <el-option v-for="(item, taskIndex) in tasksType" :key="taskIndex" :value="item.value" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="3" :lg="4" :md="5" :sm="6">
            <el-form-item prop="status">
              <div><span class="red">*</span>状态</div>
              <el-select v-model="data.status" size="mini">
                <el-option v-for="(item, statusIndex) in plansStatus" :key="statusIndex" :value="item.value" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="3" :lg="4" :md="5" :sm="6">
            <el-form-item prop="sort">
              <div><span class="red">*</span>排序</div>
              <el-input-number v-model="data.sort" size="mini" :min="1" :max="1000000" :precision="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="!edit">
        <el-tabs>
          <el-tab-pane label="描述">
            <Tinymce id="content" v-model="data.content" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-else>
        <el-tabs>
          <el-tab-pane label="适用于">
            <div>
              <el-row :gutter="10">
                <el-col :span="12">
                  <h3>维护计划</h3>
                  <el-table :data="data.plan_list">
                    <el-table-column label="资产">
                      <template v-slot="{row}">
                        {{ row.equipment }}
                      </template>
                    </el-table-column>
                    <el-table-column label="类型">
                      <template v-slot="{row}">
                        {{ row.category }}
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="描述">
            <el-row :gutter="10">
              <el-col :span="4">
                <div>
                  <span>创建时间日期</span>
                  <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" readonly />
                </div>
                <div>
                  <span>创建人</span>
                  <el-input v-model="data.create_admin" placeholder="创建人" class="mtb10" readonly />
                </div>
                <div v-if="data.update_time">
                  <div>
                    <span>最近更新</span>
                    <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" readonly />
                  </div>
                  <div>
                    <span>更新者</span>
                    <el-input v-model="data.update_admin" placeholder="更新者" class="mtb10" readonly />
                  </div>
                </div>
              </el-col>
              <el-col :span="20">
                <Tinymce id="content" v-model="data.content" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-row>
  </div>
</template>
<script>
import API from '@/api/project1/task'
import { tasksType, plansStatus } from '@/utils/options'
import Tinymce from '@/components/Tinymce'
export default {
  inject: ['addOne', 'update', 'delOne', 'goUrl', 'isEdit'],
  components: {
    Tinymce
  },
  data() {
    return {
      data: {
        status: 1,
        sort: 100,
        plan_list: []
      },
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        type_id: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      edit: false,
      loading: false,
      tasksType,
      plansStatus
    }
  },
  created() {
    this.index()
  },
  methods: {
    index() {
      if (this.isEdit()) {
        this.edit = true
        this.info()
      }
    },
    info() {
      this.loading = true
      const id = this.$route.params.id
      API.getOne(id).then(response => {
        if (response.data.error_code) {
          this.$alert(response.data.message, '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.goBack()
            }
          })
        } else {
          this.data = response.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.edit ? this.update(API, thisData, thisForm) : this.addOne(API, thisData, thisForm)
    },
    goBack() {
      this.goUrl('/project1/task')
    }
  }
}
</script>
<style scoped>
.red{
  color: red;
}
</style>
